<template>
  <div class="app-container">
    <el-row :gutter="20" class="toolbar" type="flex" justify="space-between">
      <!-- 左侧组合 -->
      <!--      <el-col :span="16">-->
      <!--        <el-row :gutter="15">-->
      <!--          <el-col :span="10">-->
      <!--            <el-input-->
      <!--                v-model="searchKey"-->
      <!--                placeholder="输入应用名称搜索"-->
      <!--                @keyup.enter.native="handleSearch">-->
      <!--              <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>-->
      <!--            </el-input>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-col>-->

    </el-row>
    <!-- 数据表格 -->
    <el-table
        :data="apiList"
        border
        stripe
        style="width: 100%"
        class="data-table">
      <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center">
      </el-table-column>

      <el-table-column
          prop="name"
          label="接口名称"
          min-width="50">
      </el-table-column>

      <el-table-column
          prop="api"
          label="接口地址"
          min-width="120">
      </el-table-column>

<!--      <el-table-column-->
<!--          prop="groupKey"-->
<!--          label="权限组key"-->
<!--          min-width="120">-->
<!--      </el-table-column>-->

<!--      <el-table-column-->
<!--          label="接口数量"-->
<!--          min-width="50">-->
<!--        <template #default="{ row }">-->
<!--          {{ row.apis ? row.apis.length : 0 }}-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      <el-table-column-->
<!--          label="操作"-->
<!--          width="200"-->
<!--          align="center">-->
<!--        <template #default="{row}">-->
<!--          <el-button-->
<!--              type="text"-->
<!--              size="small"-->
<!--              @click="handleConfig(row)">查看接口-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>


  </div>

</template>

<script>
import {queryUserGroupApi} from '@/api/gateway-user-manage'

export default {
  data() {
    return {
      apiList: [],
      sysAppId: '',
      groupKey: ''
    }
  },
  mounted() {
    this.sysAppId = this.$route.query.id
    this.groupKey = this.$route.query.groupKey
    this.loadAppData()
  },
  methods: {
    // 加载数据方法
    async loadAppData() {
      try {
        const params = {
          id: this.sysAppId,
          groupKey: this.groupKey,
        }
        const {data} = await queryUserGroupApi(params)
        this.apiList = data
      } catch (error) {
        console.error('数据加载失败:', error)
      }
    },
    async handleConfig(row) {
      this.$router.push({name: 'user-permission-group', query: {id: row.id}})
    },
  }
}
</script>

<style scoped>

/* 新增样式 */
.el-dialog__body {
  padding: 20px 30px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-textarea {
  resize: vertical;
}

.toolbar {
  margin-bottom: 20px;
}

.search-input {
  margin-right: 10px;
}

.data-table {
  margin-top: 15px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.text-right {
  text-align: right;
}

.detail-dialog .el-form-item {
  margin-bottom: 15px;
}

.detail-dialog .el-form-item span {
  font-weight: bold;
  color: #333;
}

.detail-dialog .dialog-footer {
  text-align: right;
  padding: 10px 0;
}

.detail-dialog .el-dialog__body {
  padding: 20px 30px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
</style>